<template>
  <div class="main pb20 pt116">
    <div class="padding-tb-15">
      <Breadcrumb separator="">
        <BreadcrumbItem>当前位置</BreadcrumbItem>
        <BreadSeparator>:</BreadSeparator>
        <BreadcrumbItem><a href="/service">数据服务</a></BreadcrumbItem>
        <BreadSeparator>></BreadSeparator>
        <BreadcrumbItem>工程详情</BreadcrumbItem>
      </Breadcrumb>
    </div>

    <div class="monomer-detail__header">

      <Row type="flex" justify="start">
          <Col :span="3">
            <div class="house">工程详情</div>
          </Col>
          <Col :span="21">
            <div class="staff-info">
              <h3>{{detail?.activityName}}</h3>



              <Row :gutter="[24, 8]">
                <Col :span="9">
                  <p><span>标段编号：</span>{{detail?.activityNo}}</p>
                </Col>
                <Col :span="15">
                  <p><span>所属项目：</span><span class="init-block">{{detail?.projectName}}</span></p>
                </Col>
              </Row>
              <Row :gutter="[24, 8]">
                <Col :span="9">
                  <p><span>发包单位：</span>{{detail?.contUnitName}}</p>
                </Col>
                <Col :span="15">
                  <p><span>承接单位：</span><span class="init-block">{{detail?.projUtakeUnitName}}</span></p>
                </Col>
              </Row>
            </div>
          </Col>

        </Row>
    </div>

    <div class="monomer-detail__tabs">
      <Tabs type="card" v-model:activeKey="activeKey">
        <TabPane key="1" tab="工程基本信息">
          <Base :detail="detail"/>
        </TabPane>
        <TabPane key="2" tab="工程参建人员">
          <person></person>
        </TabPane>
        <TabPane key="3" tab="包含单体明细">
          <single></single>
        </TabPane>
        <TabPane key="4" tab="工程文书信息">
          <official></official>
        </TabPane>
      </Tabs>
    </div>

  </div>
</template>

<script lang="ts" >
import { defineComponent, ref, onMounted,  provide } from "vue";
import { Tabs,  Row, Col, Breadcrumb, Empty } from "ant-design-vue";
import { useRoute } from "vue-router";
import { Base , person , single , official } from './src/index';
import { getActivityBaseInfoApi , activityBaseModel} from "/@/api/activity";
import { parseTime } from "/@/utils";


export default defineComponent({
  name: "activity",
  components: {
    Row, Col, Tabs, TabPane: Tabs.TabPane,
    Breadcrumb, BreadcrumbItem: Breadcrumb.Item,
    BreadSeparator: Breadcrumb.Separator, Empty,
    Base , person , single , official
  },
  setup() {
    const { params } = useRoute();
    const activityId:string = params.id as string;
    const detail = ref<activityBaseModel>({});
    provide('activityId', activityId);
    const init = async() => {
      let{ success , data } = await getActivityBaseInfoApi({activityId});
      success && data ? detail.value = data : console.log ('接口返回错误或者data值为null')

    }
    onMounted(init);
    return {
      detail, parseTime , activeKey: ref("1")
    }
  }
});
</script>

<style lang="less" scoped>
::v-deep(.ant-tabs) {

  .ant-tabs-bar {
    margin: 0;
  }
}

.monomer-detail__header {
  position: relative;
  padding: 30px;
  margin-bottom: 20px;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);

  .house{
    display: flex;
    width: 100px;
    height: 100px;
    padding: 24px;
    margin: 8px 0 5px;
    font-size: 24px;
    line-height: 1.2;
    color: white;
    background: #7C72DC;
    justify-content: center;
    align-content: center;
    align-items: center;

  }

  .staff-info{
    h3{
      min-height: 37px;
      margin-bottom: 15px;
      font-size: 26px;
      font-weight: 600;
      line-height: 37px;
      color: #000;
    }

    p{
      margin-bottom: 8px;
      color: #000;

      &.car-no{
        margin-bottom: 18px;
      }

      > span {
        display: inline-block;
        margin-right: 5px;
        line-height: 20px;
        vertical-align: top;

        &:first-child{
          color: #777;
        }

        &.init-block{
          width: 530px;
        }
      }
    }
  }
}



::v-deep(.ant-tabs-card) {
  margin-bottom: 40px;
  background: white;

  .ant-tabs-bar {
    margin: 0;
  }

  .ant-tabs-nav-container {
    height: 58px !important;
    background: #f5f5f6;
    border: 1px solid #e8eaee;

    .ant-tabs-tab {
      height: auto !important;
      padding: 18px 30px !important;
      margin: 0 !important;
      font-size: 16px;
      line-height: 22px !important;
      background: #f5f5f6 !important;
      border: 0 !important;

      &.ant-tabs-tab-active {
        color: @blue;
        background: @white !important;
      }
    }
  }
}


.show-table{
  width: 100%;
  background: white;
  border: 1px solid #f0f0f0;

  tr{
    td{
      height: 50px;
      padding: 5px 15px;
      vertical-align: center;
      border: 1px solid #EAEAEA;

      &.key{
        background: #F3F3F3;
      }

    }
  }
}
</style>
